<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
<h:head>
  <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
  <link href="../style.css" rel="stylesheet" type="text/css" />
  <title>Catálogo | lamparashervas.com</title>
  <meta name="description" content="Catálogo. Todos los productos son de diseño y fabricación propia. Se realizan bajo pedido y son manufacturadas con el máximo mimo en los detalles."/>
  <meta name="keywords" content="lamparas, reparacion, reparaciones, restauracion, Madrid, tienda, taller"/>
</h:head>

<h:body>
	<div class="main">
	  <div class="header">
	    <div class="header_resize">
	      <div class="logo"><h1><a href="/"><span>lamparas</span>Hervas <small>Diseño, restauración y mantenimiento.</small></a></h1></div>
	      <div class="clr"></div>
	      <div class="menu_nav">
	        <ul>
	           <li><a href="/">Inicio</a> </li>        
		        <li><a href="/servicios">Servicios</a></li>
				<li class="active"><a href="/catalogo">Catálogo</a></li>
				<li><a href="/ultimas">Ultimas fotos</a></li>
				<li><a href="/contacto">Contacto</a></li>  
	        </ul>
	      </div>
	    </div>
	  </div>
    </div>

<div class="content">
    <div class="content_resize">
          <div class="mainbar">
	       	  <div class="article">
	          <h2>Catálogo</h2><div class="clr"></div>
	          
	          <p><strong> Nuestras lámparas son exclusivas, de diseño propio y estilo clásico.</strong><br></br>
	          Se frabrican bajo pedido y pueden personalizarse. Contacta con nosotros para conocer todas las opciones.
	          </p>
	          </div>
	          
			 <ui:repeat var="prod" value="#{productsBean.productos}">
		   
				<div style="float: left; width: 188px; margin: 4px; border-width: 1px; border-style: solid; border-color: #b7b7b7; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px;">
				<a name="${prod.ref}"> </a> 
	            <img  src="${prod.smallUrl}" width="170px" height="170px" alt="image" style="border:1px solid #b7b7b7; background-color:#fff; cursor:pointer;  margin:4px 70px 4px 4px; float:left;" onclick="${prod.dlg}.show()"/>
				<p:dialog id="picture" widgetVar="${prod.dlg}" header="Detalle lampara: ${prod.ref}"  resizable="false" modal="true" draggable="false">  
		        	<p:graphicImage value="${prod.bigUrl}" style="padding:4px; border:1px solid #b7b7b7; background-color:#fff;" />  
		        </p:dialog> 
	            <p style="padding: 5px"> <strong>Referencia: </strong>${prod.ref}<br></br>
	  		      <strong>Diámetros: </strong>${prod.diametro}<br></br>
	  			  <strong>Alturas:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </strong>${prod.altura}<br></br>
	  			  <strong>Nº luces:&nbsp;&nbsp;&nbsp;&nbsp; </strong>${prod.numLuces}<br></br>
	  			  <strong>Acabados:&nbsp; </strong>${prod.acabados}
	  			  
	            </p>
	            </div>
	             			
			</ui:repeat>	
			
			
     	</div>
     	
     	<div class="sidebar">
	        <div class="gadget">
	          <h2 class="star">Referencias</h2><div class="clr"></div>
	          <ul class="sb_menu">
	          
	          	 <ui:repeat var="prod" value="#{productsBean.productos}">
	          	  <li><a href="#${prod.ref}">${prod.ref}</a></li>
	          	 </ui:repeat>
	          </ul>
	        </div>
         </div> 
         <div class="clr"></div>
         
    </div>
</div>

<!-- ::::: fbg: INICIO -->
   <div class="fbg">
    <div class="fbg_resize">
      <div class="col c1">
        <h2><span>Redes sociales</span></h2>
         <a href="http://www.facebook.com/LamparasHervas"><p:graphicImage id="hface" value="../images/facebook.png" width="64" height="64" alt="pix"/></a>
         <p:tooltip for="hface" value="Facebook" showEffect="fade" hideEffect="fade"/>   
         <a href="http://www.twitter.com/LamparasHervas"><p:graphicImage id="htwit" value="../images/twitter.png" width="64" height="64" alt="pix"/></a>
         <p:tooltip for="htwit" value="Twitter" showEffect="fade" hideEffect="fade" />   
         <a href="http://www.flickr.com/photos/lamparashervas/"><p:graphicImage id="hflic" value="../images/flickr.png" width="64" height="64" alt="pix"/></a>
 	     <p:tooltip for="hflic" value="Flickr" showEffect="fade" hideEffect="fade" />  
         <a href="http://www.linkedin.com"><p:graphicImage id="hlink" value="../images/linkedin.png" width="64" height="64" alt="pix"/></a>
         <p:tooltip for="hlink" value="LinkedIn" showEffect="fade" hideEffect="fade" />  
      </div>

      <div class="col c3">
        <h2><span>¿Preguntas?</span></h2>
        <p> Si tiene cualquier consulta sobre nuestros servicios o productos, alguna sugerencia que realizarnos o necesita nuestra asistencia puede contactar con nosotros mediante las redes sociales
            en las cuales participamos. Estaremos encantados de poder ayudarle.<br></br><br></br>
        
        	También puede contactar con nosotros tradicionalmente, encontrará la información en la sección de <a href="/contacto">"Contacto"</a>.
        </p>
      </div>
      <div class="clr"></div>
    </div>
  </div>
<!-- ::::: fbg: FIN -->

<!-- ::::: footer: INICIO -->
<div class="footer">
    <div class="footer_resize">
     
    <p class="lf">2012 © Copyright - Todos los derechos reservados.<span>&nbsp;&bull;&nbsp;</span> <a href="/legal">Aviso Legal</a></p> 
 	    
     <ul class="fmenu">
	           <li><a href="/">Inicio</a> </li>        
		        <li><a href="/servicios">Servicios</a></li>
				<li class="active"><a href="/catalogo">Catálogo</a></li>
				<li><a href="/ultimas">Ultimas fotos</a></li>
				<li><a href="/contacto">Contacto</a></li>  
      </ul>
      <div class="clr"></div>
      <p align="center">
		 <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
		 <img src="https://developers.google.com/appengine/images/appengine-silver-120x30.gif" alt="Powered by Google App Engine" />
     </p>
    </div>
  </div>
<!-- ::::: footer: FIN -->

</h:body>
</f:view>
</html>